<template>
  <div id="app">
    <!-- 头部 -->
    <nav-bar v-if="!$route.meta.hidenav">千影电影</nav-bar>
    <!-- 顶部导航条 -->
    <top-nav v-if="!$route.meta.hidetop"></top-nav>
    <!-- 底部导航条 -->
    <foot-nav v-if="!$route.meta.hidefoot"></foot-nav>
    <!-- 路由出口 -->
    <!-- <keep-alive> -->
    <transition enter-active-class="animate__animated animate__backInLeft">
      <router-view :key="Math.ceil(Math.random()*100)"></router-view>
    </transition>
    <!-- </keep-alive> -->
  </div>
</template>

<script>
// 引入navbar插槽
import NavBar from "@/components/NavBar.vue";
// 引入顶部导航条
import TopNav from "@/views/TopNav.vue";
// 引入底部导航条
import FootNav from "@/views/FootNav.vue";

import { mapMutations } from 'vuex';

export default {
  components: {
    TopNav,
    FootNav,
    NavBar,
  },
  created(){
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
        // localStorage.removeItem("store");
    } 

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        localStorage.removeItem("store");
        localStorage.setItem("store",JSON.stringify(this.$store.state))
    })
    this.getTime()
  },
  methods:{
    ...mapMutations(["time"]),

    getTime() {
      var date = new Date();
      //将今天的时间转换成 yyyy-mm-dd 的格式
      var time =
        date.getFullYear() 
        + "-" +
        (date.getMonth() + 1 > 9 ? date.getMonth() + 1: "0" + (date.getMonth() + 1)) 
        + "-" +
        (date.getDate() > 9 ? date.getDate() : "0" + date.getDate())
      // console.log(time);
      this.time(time)
    },
  },
  computed:{
    // ...mapState(["time"])
  },
  data(){
    return{
      date:{},
    }
  }
};
</script>

<style lang="less">
.nav {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 38px;
  padding: 6px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background: #f03d37;
  z-index: 5;
  .title {
    font-size: 18px;
  }
}
::-webkit-scrollbar{
	width:0!important;
	height: 0!important;
	display: none;
    background: transparent;
	color: transparent;
}
</style>
